<template>
  <div style="height: 100%;">
    <span v-if="!dimensionList || dimensionList.length == 0" class="dimension-empty-text">{{ hintText }}</span>
    <Tabs
      v-if="dimensionList && dimensionList.length > 0"
      class="dimension-tabs"
      v-model="tabName"
      style="height: 100%;"
    >
      <TabPane
        v-for="dimension in dimensionList"
        :key="dimension.id"
        :label="dimension.dimensionName"
        :name="dimension.dimensionCode"
      >
        <assign-permission
          :tenant-code="tenantCode"
          :rule-code="ruleCode"
          :control-level="controlLevel"
          :dimension-id="dimension.id"
          :dimension-code="dimension.dimensionCode"
          :data-struct-type="dimension.dataStructType"
          :dimension="dimension"
          :activeTab="tabName"
          @closeSildePageHook="onCloseSildePageHook"
        />
      </TabPane>
    </Tabs>
  </div>
</template>
<script>
import dataPermissionAPI from "@/api/dataPermissionAPI.js";
import AssignPermission from "./AssignPermission.vue";
import locales from "./locales.js";

export default {
  mixins: [locales],
  components: {
    AssignPermission
  },
  props: {
    tenantCode: {
      type: String,
      default() {
        return "";
      }
    },
    ruleCode: {
      type: String,
      default() {
        return "";
      }
    },
    controlLevel: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      searchForm: {
        tenantCode: this.tenantCode,
        policyCode: this.ruleCode
      },
      dimensionList: [],
      tabName: "",
      hintText: "",
      useCloseHook: false,
      customCloseHook: _ => _
    };
  },
  computed: {},
  created: function () {
    this.init();
    this.$emit('SetCloseHook', this.beforeCloseSidePage)
  },
  beforeMount: function () {},
  mounted: function () {},
  beforeDestroy: function () {},
  destroyed: function () {},
  methods: {
    init() {
      this.hintText = this.$t("module.dataPermission.warning.hintWait");
      dataPermissionAPI.queryAssignedDimension(this.searchForm).then(data => {
        // this.dimensionList = data
        this.dimensionList = data.filter(item => item.enabled != 0);
        // 默认选中第一个维度
        if (this.dimensionList && this.dimensionList.length > 0) {
          this.tabName = this.dimensionList[0].dimensionCode;
        }
        this.hintText = this.$t("module.dataPermission.warning.assignDimension");
        this.useCloseHook = (this.dimensionList?.filter(d => d?.dataStructType == '99')).length > 0;
      });
    },
    onCloseSildePageHook(fn) {
      if (typeof fn === 'function') {
        this.customCloseHook = fn
      }
    },
    async beforeCloseSidePage() {
      if (this.useCloseHook) {
        await this.customCloseHook()
        return Promise.resolve(true)
      }
      return Promise.resolve(true)
    }
  },
  watch: {},
  directives: {}
};
</script>
<style lang="less">
.dimension-tabs {
  .ivu-tabs-nav {
    .ivu-tabs-tab-active {
      color: #ff6f4b;
      background-color: #fffdf0ef;
    }
    .ivu-tabs-tab-active:hover {
      color: #ff6f4b;
    }
    .ivu-tabs-tab:hover {
      color: #ff6f4b;
    }
    .ivu-tabs-ink-bar {
      background-color: #ff6f4b;
    }
  }
  .ivu-tabs-content-animated {
    height: calc(~"100% - 63px");
  }
  .left-area {
    // display: inline-block;
    float: left;
    width: 40%;
    height: 100%;
    border: 1px solid rgb(232, 232, 232);
    border-radius: 4px;
  }
  .right-area {
    display: inline-block;
    width: 59%;
    height: 100%;
    // border: 1px solid rgb(232, 232, 232);
    border-radius: 4px;
    margin-left: 8px;
  }
}
.dimension-empty-text {
  position: relative;
  left: 40px;
  top: 20px;
  color: #909399;
  font-size: 14px;
}
</style>
